// 指琴   0.54    24/1/8首次编辑

// 颜色选择

let weight = 0;
let weightColor = ['black', 'red', "#00aaff"] //颜色值
let weightInput = document.querySelectorAll(".weight");
let globalKeyindex = 0;
let keySelectText1 = document.querySelector("#keySelectText1")
let keySelectText2 = document.querySelector("#keySelectText2")

//琴谱名字的预设变量
let MusicNFontSize = 50; // 默认的字体大小 	
let MuisNaFszMax = 80;
let MuisNaFszMin = 30;
let MuisNaColor = "black";
let MusicNameFontSize = document.querySelector("#MusicNameFontSize")
MusicNameFontSize.value = MusicNFontSize;
MusicNameFontSize.max = MuisNaFszMax;
MusicNameFontSize.min = MuisNaFszMin;
let MusicName = document.querySelector("#MusicName");
let MusicNameColor = document.querySelector("#MusicNameColor");

let actionThe = document.querySelector("#actionThe");
actionThe.disabled = true;

function weightSelect(index) {

	keySelectText1.innerHTML = `你正在选择你在这一段的第${weight+1}个音`
	if (index == 200) {
		for (var winput of weightInput) {
			(function(winput) {
				winput.addEventListener("click", function() {
					weight = parseInt(winput.value)
					winput.style = "background:" + weightColor[weight];
					keySelectText1.innerHTML = `你正在选择你在这一段的第${weight+1}个音`
					for (var kBor of getAllSiblings(winput)) {
						kBor.style = "background:white";
					}
				})
			})(winput)
			weightInput[1].classList.add("xiaoshi");
			weightInput[2].classList.add("xiaoshi");
			// 严谨一点
		}
	} else {
		weight = index;
		weightInput[weight].style = "background:" + weightColor[weight];
		for (var kBor of getAllSiblings(weightInput[weight])) {
			console.log(kBor)
			kBor.style = "background:white";
			kBor.classList.add("xiaoshi")
		}

	}
}
weightSelect(200);

let KeyInputArry0 = [];
let KeyInputArry1 = [];
let KeyInputArry2 = [];
// 键名集合

keyNameSelect(1);

function KeyClick() {
	// keySelectText2.innerHTML = `请选择选择整谱第${globalKeyindex+1}音`
	//  转换为坐标 手动键点击事件 -------------
	let key = document.querySelectorAll(".key");
	for (var k of key) {
		// console.log(k);
		(function(k) {
			k.addEventListener("click", function() {
				// keySelectText2.innerHTML = `请选择选择整谱第${globalKeyindex}音`
				if (k.classList.contains("avit")) {

					k.classList.remove("avit");
					k.style = "background:white";
					let keyNewInputArry = [];
					switch (k.getAttribute("data-keyWeihght")) {
						// key的当前权重而不是选中的权重
						case '0':
							keyNewInputArry = KeyInputArry0.filter(item => item !== k.getAttribute(
								"data-keyName"));
							KeyInputArry0 = keyNewInputArry;
							keyNewInputArry = [];
							// console.log("当前键权重为0,并且清除了当前键的坐标", KeyInputArry0)
							break;
						case '1':
							keyNewInputArry = KeyInputArry1.filter(item => item !== k.getAttribute(
								"data-keyName"));
							KeyInputArry1 = keyNewInputArry;
							keyNewInputArry = [];
							break;
						case '2':
							keyNewInputArry = KeyInputArry2.filter(item => item !== k.getAttribute(
								"data-keyName"));
							KeyInputArry2 = keyNewInputArry;
							keyNewInputArry = [];
							break;
					}
				} else {
					switch (weight) {
						case 0:
							k.style = "background:" + weightColor[0];
							k.classList.add("avit");
							KeyInputArry0.push(k.getAttribute("data-keyName"))
							k.setAttribute("data-keyWeihght", 0)
							weightInput[1].classList.remove("xiaoshi")
							break;
						case 1:
							k.style = "background:" + weightColor[1];
							k.classList.add("avit");
							KeyInputArry1.push(k.getAttribute("data-keyName"))
							k.setAttribute("data-keyWeihght", 1)
							weightInput[2].classList.remove("xiaoshi")

							break;
						case 2:
							k.style = "background:" + weightColor[2];
							k.classList.add("avit");
							KeyInputArry2.push(k.getAttribute("data-keyName"))
							k.setAttribute("data-keyWeihght", 2)
							break;
					}

					console.log(KeyInputArry0, KeyInputArry1, KeyInputArry2)
				}
			});
		})(k);
	}
}
let canvas = document.getElementById("drawcanvas");
let ctx = canvas.getContext("2d");
let canvasBackgroundColor = "#ffffff";
let canvasPadding = 20
let canvaswidht = 1193 + canvasPadding;
let canvasheight = 3000 + canvasPadding;
// 宽度定义，高度自适应
canvas.width = canvaswidht
canvas.height = canvasheight
ctx.fillStyle = canvasBackgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height)
// canvas.style = "background:"+canvasBackgroundColor

////////////////////////////////////////////////////////////////啊咯



//顶部插图
let topImageBool = true; //是否使用顶部插图
let topImageSrc = '';
let topImageHeight = 300 //顶部插图高度 ---------
let topImageWidht = canvaswidht;
// ----------------------------------------

// 冷调试的默认参数
var DefHeadHight_ = 90;
var boxBeginX_ = 0 + canvasPadding;
var boxEndY_ = 0 + canvasPadding + DefHeadHight_;
var KeyBoxIndex_ = 0;
var innerPadding_ = 1.5;
var innerPadding_Min = 1;
var innerPadding_Max = 13;
var TheRowMaxNum_ = 6;
//热调试的绘制参数-------------
var boxBeginX = boxBeginX_;
var DefHeadHight = DefHeadHight_;
var boxEndY = 0 + boxEndY_;
var keyboxWidthAndHeight = 33; //小键的长宽
var innerPadding = innerPadding_; //填充框内边距
var innerAdjustment = innerPadding * 2;
var rightMargin = 20 // 右外边距
var bottonMargin = 30 //下外边距
var KeyBoxIndex = KeyBoxIndex_; //生成了多少键的数量索引
var TheRowMaxNum = TheRowMaxNum_; //当前行最大的列数
var RowMax = 0; //整页的行数
//记录输入的琴谱
let KeyInputlog = []

let KeyTableColor = "#000000"
//格子颜色

let lyric = document.querySelector("#lyric");
let lyricColor = "black";
let lyricFontSize = 20;
let lyricY = boxEndY + keyboxWidthAndHeight * 3 + lyricFontSize //歌词的放置位置;

let lyricSelectColor = "#5fb602"
//歌词选择器颜色
//歌词文本域的定义
let lyriclogIndex; // 歌
let lyriclog = [];
//记录歌词的
/*[  总   [  单个块记录	[红][黑][蓝]]  ]    ]*/
drawTopImage()

let HeadimgSrc = "img/3a960fac7a0042fbb190a58982d38edd.png"


let FilleSelect = document.querySelector("#FilleSelect");

function drawTopImage() {
	//画头部头部头偷偷偷偷秃头
	let IstopImage = document.querySelector("#IstopImage")
	// 检查复选框是否被选中  
	topImageBool = IstopImage.checked ? true : false;
	if (topImageBool) {
		boxEndY = topImageHeight + bottonMargin
		// 这里已经加了y值
		ClearOrRestDrawCanvas(1);
	} else {
		boxEndY = boxEndY_;
		ClearOrRestDrawCanvas(1);
		MusicNameDraw(document.querySelector("#MusicName").value)
	}

}

function clearKey() {
	// 清除在选择音上的键
	let key = document.querySelectorAll(".key");
	for (var k of key) {
		k.classList.remove("avit");
		k.style = "background:white";
		KeyInputArry0 = [];
		KeyInputArry1 = [];
		KeyInputArry2 = [];
	}
}


function ClearOrRestDrawCanvas(index) {
	console.log("ClearOrRestDrawCanvas被调用了")
	console.log(boxEndY, 'boxendy在判断有没有头之前')
	//清空和重画
	if (index == 0) {
		//带记录清空
		KeyInputlog = [];
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		ctx.fillStyle = canvasBackgroundColor;
		ctx.fillRect(0, 0, canvas.width, canvas.height)
		boxBeginX = boxBeginX_;
		boxEndY = boxEndY_;
		KeyBoxIndex = KeyBoxIndex_;
		topImageBool = false;
		document.querySelector("#IstopImage").checked = false
	} else if (index == 1) {
		// 重画画布
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		ctx.fillStyle = canvasBackgroundColor;
		ctx.fillRect(0, 0, canvas.width, canvas.height)
		MusicNameDraw(document.querySelector("#MusicName").value)
		if (topImageBool) {
			boxEndY = topImageHeight + bottonMargin;
			// 判断是否有头部插图,有的话就先画这个
			console.log("有头部，我的boxendy是", boxEndY)
			var img = new Image();
			img.src = HeadimgSrc;
			img.onload = function() {
				// 在图片加载完成后，将其绘制到canvas上  
				// boxEndY = topImageHeight;
				console.log(boxEndY, 'boxendy在有头之后')
				ctx.drawImage(img, 0, 0, canvaswidht, topImageHeight);
				//画完图片在图片上面画琴谱的名字
				MusicNameDraw(document.querySelector("#MusicName").value)
			};
		} else {
			console.log("没头部，我的boxendy是", boxEndY)
			boxEndY = boxEndY_;
		}

		Parsinglogs();
	}
}



// let ListNumBool = false;
// 是否在调试列数
function DrawAction(index) {
	console.log("第一步的重新画 boxend", boxEndY)
	console.log(KeyBoxIndex)
	if (KeyBoxIndex != -1) {
		actionThe.disabled = false
		console.log("可以了")
	} else {
		actionThe.disabled = true
	}
	// 一行最大可以有n个，超过n个就往下
	console.log("没进判断之前按现在的keyboxindex是", KeyBoxIndex)
	if (KeyBoxIndex == TheRowMaxNum) {
		console.log("keyboxindex是", KeyBoxIndex, "theRowMaxNum", TheRowMaxNum, index)
		KeyBoxIndex = 0
		lyricY = (boxEndY + keyboxWidthAndHeight * 7.8) + lyricFontSize - bottonMargin
		//这一句我也不知道什么原理，但是能用就行
		boxEndY += keyboxWidthAndHeight * 3 + bottonMargin
		RowMax++;
	}
	// DrwlyricSelect();
	//画歌词选择器暂时不画
	console.log("第二步的重新画 boxend", boxEndY)
	var KeyXY = tabKey(KeyInputArry0, KeyInputArry1, KeyInputArry2)
	// 生成坐标
	// console.log("生成源参数", KeyInputArry0, KeyInputArry1, KeyInputArry2)
	// console.log("坐标参数", KeyXY)
	// ctx.clearRect(0, 0, canvas.width, canvas.height);
	let newKeyjilu = []; //新的记录
	newKeyjilu.push(KeyInputArry0)
	newKeyjilu.push(KeyInputArry1)
	newKeyjilu.push(KeyInputArry2)

	if (index == 0) {
		// 生成本个
		clearKey();
		ctx.clearRect(boxBeginX, boxEndY, keyboxWidthAndHeight * 5, keyboxWidthAndHeight * 3);
		// 当生成本个的时候删除本个再添加一次
		KeyInputlog.pop()
		KeyInputlog.push(newKeyjilu)
	} else if (index == 1) {
		//生成下个
		clearKey();
		KeyBoxIndex++
		boxBeginX = keyboxWidthAndHeight * 5 * (KeyBoxIndex - 1) + rightMargin * (KeyBoxIndex - 1) + canvasPadding
		// 不记录重新印刷的
		KeyInputlog.push(newKeyjilu)
		weightSelect(0);
		weightIndexNum = weight;
	} else if (index = 3) {
		// 重新画记录
		clearKey();
		console.log("重新画记录")
		KeyBoxIndex++
		boxBeginX = keyboxWidthAndHeight * 5 * (KeyBoxIndex - 1) + rightMargin * (KeyBoxIndex - 1) + canvasPadding
	}
	// 生成（参数交接）
	// 每次生成,记录键名
	// 
	drawKeyBox(KeyXY[0], KeyXY[1], KeyXY[2]);
	// 设置高度
	if (canvas.height < keyboxWidthAndHeight * 3 * (RowMax + 2) + canvasPadding) {
		// canvas.height+=70
		// 不知道怎么增加高度（已解决）
	}
	// var srccc = canvas.toDataURL("image/png");
	// $("#cavimage").attr("src", srccc);
	// console.log($("#cavimage"))
}



//输入键名

// drawKeyBox(kArry1, kArry2, kArry3);
// KeyBoxIndex++
// boxBeginX =  keyboxWidthAndHeight*5*(KeyBoxIndex-1)+rightMargin*(KeyBoxIndex-1)
// 	drawKeyBox(kArry1, kArry2, kArry3);

// KeyBoxIndex++
// boxBeginX =  keyboxWidthAndHeight*5*(KeyBoxIndex-1)+rightMargin*(KeyBoxIndex-1)
// 	drawKeyBox(kArry1, kArry2, kArry3);


function Parsinglogs() {
	// 解析记录
	boxBeginX = boxBeginX_;
	KeyBoxIndex = KeyBoxIndex_;
	// 解析（记录）并且画到画布上
	for (let keyArry of KeyInputlog) {
		KeyInputArry0 = keyArry[0];
		KeyInputArry1 = keyArry[1];
		KeyInputArry2 = keyArry[2];
		DrawAction(3)
	}
}


function DeletThis(){
	//删除当前
	KeyInputlog.pop()
	ClearOrRestDrawCanvas(1)

}

// 热调整的绑定事件区（|）-----------
// 内边距


let fillpadding = document.querySelector("#fillpadding")
console.log(fillpadding)
fillpadding.min = innerPadding_Min
fillpadding.max = innerPadding_Max;
fillpadding.addEventListener("input", function() {
	innerPadding = parseFloat(innerPadding_Max - fillpadding.value);
	innerAdjustment = innerPadding * 2;
	ClearOrRestDrawCanvas(1);
})

let canvasbackgroundInput = document.querySelector("#canvasbackgroundInput");
//设置画板颜色
console.log(canvasbackgroundInput)
canvasbackgroundInput.addEventListener("input", function() {
	canvasBackgroundColor = this.value
	ClearOrRestDrawCanvas(1)
})

let keyRowNum = document.querySelector("#keyRowNum")
keyRowNum.selectedIndex = TheRowMaxNum - 1;
keyRowNum.addEventListener("input", function() {
	var index = keyRowNum.selectedIndex;
	TheRowMaxNum = parseInt(this.options[index].value)
	// ListNumBool = true;
	ClearOrRestDrawCanvas(1)
	// ListNumBool = false;
})
// 看到这里说一句，很多变量名都是按感觉乱起的
//这里让有一个标题的位置

MusicName.addEventListener("input", function() {
	ClearOrRestDrawCanvas(1);
	MusicNameDraw(this.value)
	//输入琴谱名字的
})

MusicNameFontSize.addEventListener("input", function() {
	ClearOrRestDrawCanvas(1);
	MusicNFontSize = parseInt(this.value)
	console.log(this.value)
	MusicNameDraw(MusicName.value)
})

function MusicNameDraw(value) {
	ctx.font = MusicNFontSize + 'px Arial';
	// 设置填充颜色  
	ctx.fillStyle = MuisNaColor;
	// 设置文字的对齐方式  
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	console.log(boxEndY)
	if (!topImageBool) {
		ctx.fillText(value, canvas.width / 2, boxEndY_ / 2);
	} else {
		ctx.fillText(value, canvas.width / 2, topImageHeight / 2);
	}
}

MusicNameColor.addEventListener("input", function() {
	MuisNaColor = this.value
	MusicNameDraw(MusicName.value)
})

FilleSelect.setAttribute("accept", "image/jpeg, image/png");
//自定义图片
FilleSelect.addEventListener("change", function() {
	var file = this.files[0];
	var reader = new FileReader();
	reader.onload = function(e) {
		HeadimgSrc = e.target.result;
		// topImageBool = true;
		drawTopImage();
	};
	reader.readAsDataURL(file);
});

// lyric.addEventListener("input", function() {
// 	ClearOrRestDrawCanvas(1);
// 	Drawlyric(this.value);
// 	DrwlyricSelect();
// })

function lyricSelect() {
	//歌词选择标
}

function Drawlyric(value) {
	//绘制歌词 -----------------------
	// 歌词出现的地方在键位下面
	ctx.font = lyricFontSize + 'px Arial';
	// 设置填充颜色  
	ctx.fillStyle = lyricColor;
	// 设置文字的对齐方式  
	ctx.textAlign = 'left';
	// ctx.textBaseline = 'middle';
	ctx.fillText(value, rightMargin, lyricY);

}

function DrwlyricSelect() {
	//绘制歌词选择器
	ctx.strokeStyle = lyricSelectColor
	//绘制歌词选择器 
	ctx.moveTo(10, lyricY - lyricFontSize)
	ctx.lineTo(10, lyricY + lyricFontSize)
	ctx.stroke()
}

const downloadB = document.querySelector("#download")
console.log(downloadB)
downloadB.addEventListener("click",function(){
	downloadCanvasImage("drawcanvas","zhiqwwq")
	// downloadImage("cavimage", "zhiq");
})


function keyNameSelect(index) {
	// 键的名字选择
	var keyShuZi = `
		<button data-keyName="a1" class="key">1</button>
		<button data-keyName="a2" class="key">2</button>
		<button data-keyName="a3" class="key">3</button>
		<button data-keyName="a4" class="key">4</button>
		<button data-keyName="a5" class="key">5</button>
		<br>
		<button data-keyName="a6" class="key">6</button>
		<button data-keyName="a7" class="key">7</button>
		<button data-keyName="b1" class="key">˙1</button>
		<button data-keyName="b2" class="key">˙2</button>
		<button data-keyName="b3" class="key">˙3</button>
		<br>
		<button data-keyName="b4" class="key">˙4</button>
		<button data-keyName="b5" class="key">˙5</button>
		<button data-keyName="b6" class="key">˙6</button>
		<button data-keyName="b7" class="key">˙7</button>
		<button data-keyName="c1" class="key">˙˙1</button>
		<br>
	`

	var keyZiMu = `
		<button data-keyName="a1" class="key">a1</button>
		<button data-keyName="a2" class="key">a2</button>
		<button data-keyName="a3" class="key">a3</button>
		<button data-keyName="a4" class="key">a4</button>
		<button data-keyName="a5" class="key">a5</button>
		<br>
		<button data-keyName="a6" class="key">a6</button>
		<button data-keyName="a7" class="key">a7</button>
		<button data-keyName="b1" class="key">b1</button>
		<button data-keyName="b2" class="key">b2</button>
		<button data-keyName="b3" class="key">b3</button>
		<br>
		<button data-keyName="b4" class="key">b4</button>
		<button data-keyName="b5" class="key">b5</button>
		<button data-keyName="b6" class="key">b6</button>
		<button data-keyName="b7" class="key">b7</button>
		<button data-keyName="c1" class="key">c1</button>
		<br>
	`
	let TobKeyBox = document.querySelector("#TobKeyBox")
	if (index == 0) {
		TobKeyBox.innerHTML = keyZiMu;
	}
	if (index == 1) {
		TobKeyBox.innerHTML = keyShuZi;
	}
	KeyClick();
}



// var arry1 = ["a7", "b2", "a4"];
// var arry2 = ["a2", "b4", "b3"];
// var arry3 = ["a3", "c1"];
// var threeDArray = tabKey(arry1, arry2, arry3);

// var kArry1, kArry2, kArry3;
// kArry1 = threeDArray[0]
// kArry2 = threeDArray[1]
// kArry3 = threeDArray[2]
// varIsBind()
// BeginKeyDome()

// function DefDome() {
// 	// 默认
// 	boxBeginX = 0;
// 	boxEndY = 0;
// 	keyboxWidthAndHeight = 33;
// 	innerPadding = 1.5;
// 	innerAdjustment = innerPadding * 2;
// 	rightMargin = 20 // 右外边距
// 	KeyBoxIndex = 0; //个数
// 	BeginKeyDome()
// }

// function BeginKeyDome() {

// 	ctx.clearRect(0, 0, canvas.width, canvas.height);
// 	drawKeyBox(kArry1, kArry2, kArry3);
// 	// 重新演示

// }


// function BeginKeyTest() {
// 	ctx.clearRect(0, 0, canvas.width, canvas.height);
// 	// 重新演示
// 	for (var i = 0; i < 6; i++) {
// 		KeyBoxIndex++
// 		boxBeginX = keyboxWidthAndHeight * 5 * (KeyBoxIndex - 1) + rightMargin * (KeyBoxIndex - 1)
// 		drawKeyBox(kArry1, kArry2, kArry3);
// 	}
// }




function drawKeyBox() {
	ctx.strokeStyle = KeyTableColor;
	// 绘制
	for (var i = 0; i < 3; i++) {
		for (var c = 0; c < 5; c++) {
			ctx.lineWidth = 1;
			ctx.strokeRect(boxBeginX + keyboxWidthAndHeight * c, boxEndY + keyboxWidthAndHeight * i,
				keyboxWidthAndHeight, keyboxWidthAndHeight);
		}
	}
	if (arguments.length >= 1) {
		for (var j = 0; j < arguments[0].length; j++) {
			var row = arguments[0][j][0];
			var col = arguments[0][j][1];
			ctx.fillStyle = weightColor[0];
			ctx.fillRect(boxBeginX + keyboxWidthAndHeight * col + innerPadding, boxEndY + keyboxWidthAndHeight * row +
				innerPadding, keyboxWidthAndHeight - innerAdjustment, keyboxWidthAndHeight - innerAdjustment);
		}
	}
	if (arguments.length >= 2) {
		for (var j = 0; j < arguments[1].length; j++) {
			var row = arguments[1][j][0];
			var col = arguments[1][j][1];
			ctx.fillStyle = weightColor[1];
			ctx.fillRect(boxBeginX + keyboxWidthAndHeight * col + innerPadding, boxEndY + keyboxWidthAndHeight * row +
				innerPadding, keyboxWidthAndHeight - innerAdjustment, keyboxWidthAndHeight - innerAdjustment);
		}
	}
	if (arguments.length >= 3) {
		for (var j = 0; j < arguments[2].length; j++) {
			var row = arguments[2][j][0];
			var col = arguments[2][j][1];
			ctx.fillStyle = weightColor[2];
			ctx.fillRect(boxBeginX + keyboxWidthAndHeight * col + innerPadding, boxEndY + keyboxWidthAndHeight * row +
				innerPadding, keyboxWidthAndHeight - innerAdjustment, keyboxWidthAndHeight - innerAdjustment);
		}
	}
	// ctx.lineWidth = 3;
	ctx.strokeRect(boxBeginX, boxEndY, keyboxWidthAndHeight * 5, keyboxWidthAndHeight * 3);
}

// var array1 = [[2, 3], [1, 4]];
// var array2 = [[0, 1], [2, 2]];
// var array3 = [[1, 1], [0, 3]];
// drawKeyBox(array1, array2, array3);


function tabKey(...args) {
	var result = [];
	for (var arg of args) {
		result.push(parseSingleArray(arg));
	}
	return result;
}

function parseSingleArray(keyArray) {
	var result = [];
	for (var key of keyArray) {
		var coordinates = [];
		switch (key) {
			case "a1":
				coordinates = [0, 0];
				break;
			case "a2":
				coordinates = [0, 1];
				break;
			case "a3":
				coordinates = [0, 2];
				break;
			case "a4":
				coordinates = [0, 3];
				break;
			case "a5":
				coordinates = [0, 4];
				break;
			case "a6":
				coordinates = [1, 0];
				break;
			case "a7":
				coordinates = [1, 1];
				break;
			case "b1":
				coordinates = [1, 2];
				break;
			case "b2":
				coordinates = [1, 3];
				break;
			case "b3":
				coordinates = [1, 4];
				break;
			case "b4":
				coordinates = [2, 0];
				break;
			case "b5":
				coordinates = [2, 1];
				break;
			case "b6":
				coordinates = [2, 2];
				break;
			case "b7":
				coordinates = [2, 3];
				break;
			case "c1":
				coordinates = [2, 4];
				break;
			default:
				break;
		}
		result.push(coordinates);
	}
	return result;
}


// //输入键名
// var arry1 = ["a7", "b2", "a4"];
// var arry2 = ["a2", "b4", "b3"];
// var arry3 = ["a3", "c1"];
// var threeDArray = tabKey(arry1, arry2, arry3);

// var kArry1, kArry2, kArry3;
// kArry1 = threeDArray[0]
// kArry2 = threeDArray[1]
// kArry3 = threeDArray[2]

// drawKeyBox(kArry1, kArry2, kArry3);


function varIsBind() {

	var quantityInput = document.getElementById('quantityInput');
	var boxBeginXInput = document.getElementById('boxBeginXInput');
	var boxEndYInput = document.getElementById('boxEndYInput');
	var keyboxWidthAndHeightInput = document.getElementById('keyboxWidthAndHeightInput');
	var innerPaddingInput = document.getElementById('innerPaddingInput');
	var rightMarginInput = document.getElementById('rightMarginInput');

	quantityInput.value = KeyBoxIndex;
	boxBeginXInput.value = boxBeginX;
	boxEndYInput.value = boxEndY;
	keyboxWidthAndHeightInput.value = keyboxWidthAndHeight;
	innerPaddingInput.value = innerPadding;
	rightMarginInput.value = rightMargin;

	quantityInput.addEventListener('input', function() {
		KeyBoxIndex = parseInt(quantityInput.value);
		console.log('数量已更改为：', KeyBoxIndex);
		BeginKeyDome()
	});

	boxBeginXInput.addEventListener('input', function() {
		boxBeginX = parseInt(boxBeginXInput.value);
		console.log('boxBeginX已更改为：', boxBeginX);
		BeginKeyDome()
	});

	boxEndYInput.addEventListener('input', function() {
		boxEndY = parseInt(boxEndYInput.value);
		console.log('boxEndY已更改为：', boxEndY);
		BeginKeyDome()
	});

	keyboxWidthAndHeightInput.addEventListener('input', function() {
		keyboxWidthAndHeight = parseInt(keyboxWidthAndHeightInput.value);
		console.log('keyboxWidthAndHeight已更改为：', keyboxWidthAndHeight);
		BeginKeyDome()
	});

	innerPaddingInput.addEventListener('input', function() {
		innerPadding = parseFloat(innerPaddingInput.value);
		innerAdjustment = innerPadding * 2;
		console.log('innerPadding已更改为：', innerPadding);
		BeginKeyDome()
	});

	rightMarginInput.addEventListener('input', function() {
		rightMargin = parseInt(rightMarginInput.value);
		console.log('rightMargin已更改为：', rightMargin);
		BeginKeyDome()
	});
}

// 所有兄弟元素
function getAllSiblings(element) {
	var siblings = [];
	var sibling = element.parentNode.firstChild;

	while (sibling) {
		if (sibling.nodeType === 1 && sibling !== element) {
			siblings.push(sibling);
		}
		sibling = sibling.nextSibling;
	}


	return siblings;
}